<template>
	<view class="mobile pages">
		<view class="header">
			<!-- 顶部空余 -->
			<view style="width:100%;height: var(--status-bar-height)"></view>
			<view class="back">
				<uni-icons type="back" size="30" color="#000" @tap="back"></uni-icons>
			</view>
		</view>
		<view class="container">
			<view class="title">
				{{isOldMobile?$t('option.modifyMobile.orNum'):isOldCode ||isNewCode?$t('option.modifyMobile.Code'):isNewMobile?$t('option.modifyMobile.newNum'):''}}
			</view>
			<view class="hint">
				{{isOldMobile?$t('option.modifyMobile.oldNum'):isOldCode ||isNewCode?$t('option.modifyMobile.sendCode'):isNewMobile?$t('option.modifyMobile.newNumber'):''}}
			</view>
			<view v-if="isOldMobile==true">
				<view class="content">
					<view class="country" @click="toCode">
						+{{code}}
						<uni-icons type="bottom" size="14" style="margin-left: 7rpx;"></uni-icons>
					</view>
					<view class="input">
						<input type="text" v-model="oldMobile">
					</view>
				</view>
				<view class="step" :class="oldMobile!=''?'is_ok':''" @tap="step('oldPhone')">
					{{$t('option.modifyMobile.Next')}}
				</view>
			</view>
			<view v-if="isOldCode==true">
				<getCode :num="4" @inputCode="getOldCode"></getCode>
			</view>
			<view v-if="isNewMobile==true">
				<view class="content">
					<view class="country" @click="toCode">
						+{{code}}
						<uni-icons type="bottom" size="14" style="margin-left: 7rpx;"></uni-icons>
					</view>
					<view class="input">
						<input type="text" v-model="newMobile">
					</view>
				</view>
				<view class="step" :class="newMobile!=''?'is_ok':''" @tap="step('newPhone')">
					{{$t('option.modifyMobile.Next')}}
				</view>
			</view>
			<view v-if="isNewCode==true">
				<getCode :num="4" @inputCode="getNewCode"></getCode>
			</view>
		</view>
	</view>
</template>

<script>
	import getCode from "@/components/shop/getCode/getCode.vue"
	import {
		sendSms,
		userBindNewphone
	} from '@/api/api.js'
	export default {
		components: {
			getCode
		},
		data() {
			return {
				oldMobile: "",
				newMobile: "",
				code: 52,
				oldCode: "",
				newCode: "",
				isOldMobile: true,
				isOldCode: false,
				isNewMobile: false,
				isNewCode: false,
				form: {}
			}
		},
		methods: {
			back() {
				if (this.isNewCode) {
					this.isNewCode = false
					this.isNewMobile = true
				} else if (this.isNewMobile) {
					this.isNewMobile = false
					this.isOldCode = true
				} else if (this.isOldCode) {
					this.isOldCode = false
					this.isOldMobile = true
				} else if (this.isOldMobile) {
					uni.navigateBack()
				}
			},
			step(key) {
				switch (key) {
					case "oldPhone":
						this.isOldMobile = false
						this.isOldCode = true
						this.form.phone = this.oldMobile
						this.form.keywords = 'oldphone'
						this.getCode()
						break;
					case "newPhone":
						this.isNewMobile = false
						this.isNewCode = true
						this.form.phone = this.newMobile
						this.form.keywords = 'newphone'
						this.getCode()
						break;
					default:
						break;
				}
			},
			toCode() {
				uni.navigateTo({
					url: `/pages/shop/login/code?code=${this.code}`
				})
			},
			// 获取短信
			getCode() {
				sendSms({
					phone: this.form.phone,
					phone_ex: this.code,
					event: this.form.keywords
				}).then(res => {
					uni.showToast({
						title: this.$t('option.modifyMobile.Serve'),
						icon: "none"
					})
					if (!!res.data.data.code) {
						if (this.form.keywords == 'oldphone') {
							this.oldCode = res.data.data.code
						} else {
							this.newCode = res.data.data.code
						}
					} else {
						return
					}
				})
			},
			getOldCode(e) {
				this.oldCode = this.oldCode || e
				this.isOldCode = false
				this.isNewMobile = true
			},
			getNewCode(e) {
				this.newCode = this.newCode || e
				userBindNewphone({
					token: uni.getStorageSync('token'),
					oldphone: this.oldMobile,
					oldcode: this.oldCode,
					newphone: this.newMobile,
					newcode: this.newCode,
					newphone_ex: this.code,
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.clearStorageSync();
						uni.reLaunch({
							url: "/pages/shop/login/other"
						})
					}, 1500)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.mobile {
		.header {
			padding: 40rpx 30rpx;
		}

		.container {
			padding: 120rpx 100rpx;

			.title {
				font-size: 56rpx;
				font-weight: 600;
				line-heihgt: 56rpx;
				margin-bottom: 30rpx;
			}

			.hint {
				font-size: 28rpx;
				line-height: 28rpx;
				color: #aaa;
				margin-bottom: 80rpx;
			}

			.content {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.country {
					font-size: 28rpx;
					font-weight: 600;
				}

				.input {
					flex: 1;
					margin-left: 20rpx;
					font-size: 56rpx;
					font-weight: 600;

					uni-input {
						font-size: 56rpx;
					}
				}
			}

			.step {
				font-size: 32rpx;
				font-weight: 400;
				margin-top: 80rpx;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				background: #aaaabb;
			}

			.is_ok {
				background: #000;
			}
		}
	}
</style>